<template>
  <div>
    <!--------事件筛选-------->
    <div class="filter-conditions  bg-color-white font12">
      <div class="conditions-list">
        <div v-if="this.conditionList.length >= 2" class="group-btn" @click="toggle">
          <v-button :width="30" :btnText="groupBtnVal.code_value_nm_cns"></v-button>
        </div>
        <div class="condition-group-list" v-for="(group, index) in conditionList" :key="group.key">
          <div class="group-head" v-if="index !== 0"></div>
          <div class="condition-group" v-for="(item, ind) in group.cond_groups" :key="item.key">
            <div class="item-btn" v-if="ind !== 0">
              <v-button :width="30" @on-click="toggleRelationship(item)"
                        :btnText="item.vs_bool_code_value === 'and' ? '且' : '或'"></v-button>
            </div>
            <div class="condition-group-item">
              <el-select v-model="item.meta_id" class="width160 lf" placeholder="请选择"
                         @change="changeEvent(item)">
                <el-option
                  v-for="val in cond_arr1"
                  :key="val.key"
                  :label="val.colume_chs"
                  :value="val.meta_id">
                </el-option>
              </el-select>
              <el-select v-model="item.vs_code_value" class="width100 lf" placeholder="请选择"
                         @change="changeAttr(item)">
                <el-option
                  v-for="val in cond_arr2"
                  :key="val.key"
                  :label="val.code_value_nm_cns"
                  :value="val.code_value">
                </el-option>
              </el-select>
              <el-input v-if="getBool_1(item)" class="lf" v-model="item.cond_value[0]"></el-input>
              <div class="date-time lf" v-if="getBool_2(item)">
                <span>在</span>
                <el-date-picker
                  class="width270"
                  v-model="item.vs_date_value"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="change(item, ind)"
                  :picker-options="pickerOptions2">
                </el-date-picker>
                <span>之间</span>
              </div>
              <div class="amount-range lf" v-if="getBool_3(item)">
                <span>在</span>
                <el-input class="width160" v-model="item.cond_value[0]" placeholder="输入内容"></el-input>
                <span>和</span>
                <el-input class="width160" v-model="item.cond_value[1]" placeholder="输入内容"></el-input>
                <span>之间</span>
              </div>
              <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                                :closable="true"></v-selectCheckbox>
              <div class="icons-list lf">
                <i v-if="item.vs_data_type === 'text'" class="iconfont icon-revise"></i>
                <i class="iconfont icon-close" @click="remove_cond(index, ind)"></i>
                <i class="iconfont icon-add" @click="addRow(group, ind)"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="add-condition">
        <el-button type="primary" plain icon="el-icon-plus" @click="addCondition"></el-button>
        <span>筛选条件</span>
      </div>
      <div class="examine">
        <div class="btns rf">
          <el-button type="primary" size="mini" @click="search">查看</el-button>
          <el-button size="mini">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { VButton } from '../../components'
  export default{
    data () {
      return {
        groupBtnVal: null, // 条件筛选，第三方变量，最外层 且 / 或 的值
        cond_arr1: null, // 条件筛选的第一框
        cond_arr2: null, // 条件筛选的第二框
        conditionList: [], // 筛选条件返回的list
        eventList: [ // 进行操作后的事件列表， 作为参数传到后台
          {
            meta_id: '',
            cond_value: [],
            cond_link: 'B010006#AND',
            cond_fmt: 'B010003#01',
            disp_serial: '0',
            vs_event_name: '',
            vs_isSelect: true,
            vs_radio: 0,
            vs_list: [],
            vs_colume_chs: '',
            vs_event_meta_id: ''
          }
        ],
        groupVal: [ // 分组返回的列表，作为参数传到后台
          {
            meta_id: '',
            disp_serial: '0',
            code_value_nm_cns: '',
            vs_code_id: '',
            vs_isSelect: true,
            code_value: ''
          }
        ]
      }
    },
    methods: {
      // 添加筛选条件
      addCondition () {
        let itemData = {
          vs_data_type: '',
          vs_code: '',
          vs_code_value: '',
          vs_bool_code: '',
          vs_bool_code_value: '',
          meta_id: null,
          disp_serial: null,
          cond_link: '',
          cond_fmt: '',
          cond_value: []
        }
        let groupData = {
          vs_bool_code: 'B010006',
          disp_serial: null,
          cond_link: null,
          elem_type: 'W',
          cond_groups: []
        }
        let count = this.conditionList.length
        if (count === 0) {
          this.cond_arr1 = this.data.META_COLUME
          this.conditionList.splice(this.conditionList.length, 0, groupData)
          this.conditionList[count].cond_groups.splice(0, 0, itemData)
          this.conditionList[count].disp_serial = count
          this.conditionList[count].cond_groups[0].disp_serial = this.conditionList[count].cond_groups.length - 1
        } else {
          this.conditionList.splice(this.conditionList.length, 0, groupData)
          this.conditionList[count].cond_groups.splice(0, 0, itemData)
          this.conditionList[count].disp_serial = count
          this.conditionList[count].cond_groups[0].disp_serial = this.conditionList[count].cond_groups.length - 1
        }
        count++
      },
      // 切换外层的且 / 或
      toggle () {
        if (this.groupBtnVal === this.data.B010006[0]) {
          this.groupBtnVal = this.data.B010006[1]
        } else {
          this.groupBtnVal = this.data.B010006[0]
        }
      },
      // 事件选择
      changeEvent (obj) {
        this.cond_arr1.forEach(item => {
          if (item.meta_id === obj.meta_id) {
            if (item.data_type === 'text') {
              this.cond_arr2 = this.data.B010003
              obj.vs_data_type = 'text'
              obj.vs_code = 'B010003'
            } else if (item.data_type === 'number') {
              this.cond_arr2 = this.data.B010004
              obj.vs_data_type = 'number'
              obj.vs_code = 'B010004'
            } else if (item.data_type === 'date') {
              this.cond_arr2 = this.data.B010005
              obj.vs_data_type = 'date'
              obj.vs_code = 'B010005'
            }
          }
        })
      },
      // 属性选择
      changeAttr (obj) {
        obj.cond_fmt = `${obj.vs_code}#${obj.vs_code_value}`
      },
      // 删除一行
      remove_cond (index, ind) {
        if (this.conditionList.length === 1) {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        } else {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        }
      },
      // 添加一行
      addRow (group, ind) {
        let itemData = {
          vs_data_type: '',
          vs_code: '',
          vs_code_value: '',
          vs_bool_code: 'B010006',
          vs_bool_code_value: this.data.B010006[0].code_value,
          meta_id: null,
          disp_serial: ind + 1,
          cond_link: '',
          cond_fmt: '',
          cond_value: []
        }
        itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
        group.cond_groups.splice(ind + 1, 0, itemData)
      },
      // 切换行与行之间的 且 / 或
      toggleRelationship (item) {
        if (item.vs_bool_code_value === 'and') {
          item.vs_bool_code_value = 'or'
        } else {
          item.vs_bool_code_value = 'and'
        }
        item.cond_link = `${item.vs_bool_code}#${item.vs_bool_code_value}`
      },
      // 判断条件
      getBool_1 (item) {
        if (item.vs_data_type === 'number' && (item.vs_code_value === '01' || item.vs_code_value === '02' || item.vs_code_value === '03' || item.vs_code_value === '04' || item.vs_code_value === '05' || item.vs_code_value === '06' || item.vs_code_value === '07' || item.vs_code_value === '08')) {
          return true
        } else if (item.vs_data_type === 'text' && (item.vs_code_value === '01' || item.vs_code_value === '02' || item.vs_code_value === '03' || item.vs_code_value === '04' || item.vs_code_value === '05' || item.vs_code_value === '06' || item.vs_code_value === '07' || item.vs_code_value === '08' || item.vs_code_value === '09' || item.vs_code_value === '10')) {
          return true
        } else if (item.vs_data_type === 'date' && (item.vs_code_value === '01' || item.vs_code_value === '02' || item.vs_code_value === '03' || item.vs_code_value === '04' || item.vs_code_value === '05' || item.vs_code_value === '06' || item.vs_code_value === '07' || item.vs_code_value === '08' || item.vs_code_value === '09' || item.vs_code_value === '10')) {
          return true
        } else {
          return false
        }
      },
      getBool_2 (item) {
        if (item.vs_data_type === 'date' && item.vs_code_value === '15') {
          return true
        } else {
          return false
        }
      },
      getBool_3 (item) {
        if (item.vs_data_type === 'number' && item.vs_code_value === '11') {
          return true
        } else {
          return false
        }
      },
      getBool_4 (item) {
        // if (item.vs_data_type === 'text' && item.vs_code_value === '02') {
        //   return true
        // } else {
        return false
        // }
      }
    },
    created () {
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      this.groupBtnVal = this.data.B010006[0]
    },
    components: {
      VButton
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .filter-conditions
    padding 30px 20px 20px 30px
    .conditions-list:before
      content ''
      width 0
      height calc(100% - 20px)
      border-left 1px solid #D8DCE5
      position absolute
      left 15px
      top 10px
    .conditions-list
      padding-left 40px
      position relative
      .el-input__inner
        font-size 12px
      .group-btn
        position absolute
        left 0
        top 50%
        margin-top -15px
      .condition-group-list
        .group-head
          height 50px
        .condition-group
          & > div
            height 50px
            line-height 50px
            padding-left 10px
          .item-btn
            position relative
            .v-button
              position absolute
          .condition-group-item
            background #f4f4f5
            overflow hidden
            & > .el-input
              width 120px
            .date-time
              padding-left 10px
              .el-date-editor
                position relative
                top 5px
                margin 0 10px
                .el-range__icon
                  line-height 25px
                .el-range-input, .el-range-separator
                  position relative
                  top -4px
                .el-range-separator
                  padding 0
                  font-size 12px
            .amount-range
              padding-left 10px
              .el-input
                margin 0 8px
            .v-select-checkbox
              margin-left 10px
            .icons-list
              margin-left 15px
              i.iconfont
                font-size 14px
                margin-right 10px
                color #D8DCE5
              i.iconfont:hover
                color #016DFB
    .add-condition
      width 150px
      height 50px
      line-height 50px
      cursor pointer
      .el-button
        width 30px
        height 30px
        display inline-block
        padding 0
        .el-icon-plus
          font-size 16px
          font-weight bold
      span
        font-size 12px
        color #016DFB
        margin-left 10px
    .examine
      height 30px
      line-height 30px
      padding 0 20px
      margin-top 30px
      .btns
        width 150px
        .el-button
          display inline-block
          width 65px
          height 30px
</style>
